<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
  </head>

  <body>
    <canvas id="myCanvas" width="600" height="300">
      <p>您的浏览器不支持 canvas!</p>
    </canvas>

    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/jcanvas/dist/jcanvas.js"></script>
    <script>
      var $myCanvas = $('#myCanvas')

      // 绘制1个圆
      $myCanvas.drawArc({
        layer: true,
        name: 'orangeCircle',
        x: 50,
        y: 50,
        radius: 100,
        fillStyle: 'orange',
        opacity: 0.5,
      })

      $myCanvas.animateLayer(
        'orangeCircle',
        {
          x: 150,
          y: 150,
          radius: 50,
        },
        1000,
        function (layer) {
          // Callback function
          $(this).animateLayer(
            layer,
            {
              fillStyle: 'darkred',
              x: 250,
              y: 100,
              opacity: 1,
            },
            'slow',
            'ease-in-out'
          )
        }
      )
    </script>
  </body>
</html>
